<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文章详情</title>
    <link rel="stylesheet" href="/stylesheets/css/index.css">
  </head>
  <body>
    <div class="container">
      <%- include('he_nav') -%>

      <div class="main box">
        <div class="showarticle">
          <h1><%= doc.title%></h3>
          <p>作者： <%= doc.loginname%> | 浏览次数 : <%= doc.accessNum%> </p>
          <% doc.content = doc.content.replace(/\r\n/g, '</p><p>').replace(/\n/g, '</p><p>').replace(/\s/g, '&nbsp'); %>
          <div>
            <p><%- doc.content %></p>
          </div>
          <p style="text-align: left">更新时间：<%= doc.S_Time%></p>
          <a href="#" onclick="deleteArt()">删除</a>
        </div>
        <form class="message" action="/users/article/:id/edit" method="post">
          <input type="text" name="title" placeholder="文章标题（30字以内）">
          <div style="color:red" data-error="title"></div>
          <textarea name="content" placeholder="文章内容"></textarea>
          <div style="color:red" data-error="content"></div>
          <%= firstnum %> + <%= secondnum %> = <input type="text" class="verif" name="vnum" >
          <button type="submit" name="button">编辑</button>
          <div style="color:red" data-error="vnum"></div>
        </form>
      </div>

      <%- include('sid_footer') -%>
    </div>
    <script type="text/javascript" src="../../../javascripts/open.js"></script>
    <script type="text/javascript" src="../../../javascripts/validateArticle.js"></script>
    <script type="text/javascript">
      const form = document.querySelector("form");
      const doms = form.querySelectorAll("div");
      const titleerror = doms[0];
      const contenterror = doms[1];
      const vnumerror = doms[2];
      const firstnum = <%= firstnum %>;
      const secondnum = <%= secondnum %>;
      const artLogId = "<%= doc.id %>";
      console.log("artLogId=",artLogId);

      async function deleteArt(event){
        await fetch("/users/article/delete",{
          method:"POST",
          body: JSON.stringify({artLogId}),
          credentials:"include",
          headers:{
            "Content-Type":"application/json"
          }
        }).then(res=>res.text())
          .then(errors=>alert(errors))
          .catch(e => console.log("error", e));
        location.href="/article";
      }

      form.onsubmit = async function (event) {
        event.preventDefault();
        const inputs = form.querySelectorAll("input");
        const title = inputs[0].value;
        const vnum = inputs[1].value;
        const content = form.querySelector("textarea").value;
        const errors = valiArt(title,content,vnum,firstnum,secondnum);
        if(errors){
          showInfo(JSON.stringify(errors));
        }else{
          await fetch("edit",{
            method:"POST",
            body: JSON.stringify({artLogId,title,content,vnum}),
            credentials:"include",
            headers:{
              "Content-Type":"application/json"
            }
          }).then(res=>res.text())
            .then(errors=>alert(errors))
            .catch(e => console.log("error", e));
          location.href="/article";
        }
      }
    </script>
  </body>
</html>
